8. animation
8.2 objekt in bewegung
Darunter wird verstanden, dass ein auf einer seite angezeigtes element durch ein ereignis in bewegung gesetzt wird und diese bewegung ohne weitere eingriffe beibehält, bis durch ein weiteres ereignis die bewegung ange-halten wird.
beispiel 8b - objekte in bewegung
Das beispiel zeigt sechs elemente, die in bewegung gesetzt werden; bei den
elementen handelt es sich jeweils im div-container. Das muss nicht so sein,
ist aber am einfachsten zu handhaben.
- Der container ueber enthält einen text und wandert vom unteren bildschirmrand nach oben und bleibt dort stehen.
- Der container dreher enthält die grafik ball, die mit zunehmender geschwindigkeit rotiert, bis sie eine bestimmte geschwindigkeit erreicht hat. Dann beginnt die rotation mit der anfangsgeschwindigkeit erneut.
- Der container phinher enthält den roten pfeil hinher und wandert von links nach rechts über den bild-schirm. Wenn der rechte rand überschritten ist, wird die grafik gewechsel und der container wandert wieder zurück und setzt das endlos fort. Der start- und wendepunkt liegt außerhalb des bildschirms.
- Die container rot und blau enthalten jeweils einen pfeil. Sie bewegen sich gegeneinander, stoßen zusammen und wandern zurück und wiederholen das endlos. Die grafiken sind unbenannt.
- Der container kriech enthält die grafik wurm; der wurm kriecht von links nach rechts, schlägt einen purzelbaum und kriecht wieder zurück und setzt das endlos fort.
- Mit start (aufruf der funktion ANFANG) werden die bewegungen gestartet, mit stopp (aufruf der funktion BEWSTOP) werden sie gestoppt.
funktion ANFANG
Die funktion steuert die bewegungen, dabei wird der erste teil der funktion
nur beim ersten aufruf auseführt. Im ersten teil werden startwerte für die
verschiedenen bewegungen gesetzt bzw. ermittelt und die bewegungen werden
gestartet. Der zweite teil der funktion wird nur ausgeführt, wenn vor dem
aufruf der funktion die bewegungen angehalten wurden; sie werden dann
fortgesetzt. Vor den funktionen stehen einige globale variable.
funktion BEWSTOP
Die funktion setzt die variable kzbew auf false und stoppt dadurch
die bewegungen.
funktion TITO
Die funktion zieht den container ueber mit dem text nach oben; beim
aufruf der funktion wird der container auf die aktuelle position in
atop gesetzt, dann wird atop um 10 verringert. Solange der wert in
atop größer ist als 10, wird die funktion per zeitgeber erneut aufgerufen
(zeittakt 100 msec).
funktion DREHEN
Die funktion läßt den ball im container dreher rotieren; für den ball
gibt es acht grafiken, die durch den aufruf der funktion nacheinander
angezeigt werden, bei jeder anzeige wird der ball um den achten teil eines
kreises gedreht. Dann wird per zeitgeber die funktion erneut aufgerufen.
Nach 16 bewegungen, d.h. zwei umdrehungen wird der zeittakt um 10 msec
verringert. Wenn eine taktzeit von 10 msec unterschritten wird, wird der
takt wieder auf 200 msec gesetzt.
funktionen GEGEN, DAVON
Die funktion GEGEN bewegt die container rot und blau
mit den pfeilen gegeneinander; bei jedem aufruf rückt der container rot um
2 pixel nach rechts und der container blau um 3 pixel nach links. Abhängig
von der errreichten position wird per zeitgeber entweder die funktion GEGEN
oder die funktion DAVON aufgerufen. Die funktion DAVON bewegt die container
auseinander, sie ist das spiegelbild der funktion GEGEN. Von der funktion
DAVON werden nur die anweisungen gezeigt, die anders sind als bei der
funktion GEGEN sind.
funktionen BEWEGRE, BEWEGLI
Die funktion BEWEGRE bewegt den container phinhermit dem
roten pfeil um 2 pixel nach rechts, solange der container nicht den
bildschirm verlassen hat und ruft dann die funktion erneut per zeitgeber
auf. Wenn der pfeil vom bildschirm verschwunden ist, wird die grafik
hinher gewechselt und die funktion BEWEGLI aufgerufen. Die
variable richt zeigt die richtung an, in der die bewegung erfolgt.
Die funktion BEWEGLI ist das spiegelbild von BEWEGRE und
steuert die bewegung nach links.
funktionen WURMRE, WURMLI
Die funktion WURMRE bewegt den container kriech mit dem wurm
schrittweise (10 pixel) nach rechts, wechselt bei jedem schritt die grafik
und ruft erneut die funktion WURMRE auf. Hat der container den rechten
bildschirm-rand erreicht, wird die funktion PURZEL aufgerufen. Die
variable wricht sagt aus, in welche richtung die bewegung geht. Die
funktion WURMLI ist das spiegelbild zur funktion WURMRE und steuert
die bewegung nach links.
funktion PURZEL
Die funktion steuert den purzelbaum des wurms; dazu werden vier grafiken
benötigt, die nacheinander angezeigt werden, d.h. nach einer anzeige wird
die funktion per zeitgeber erneut aufgerufen. Nach 10 purzelbäumen wird
abhängig von wricht der wurm nach rechts oder nach links gerichtet
angezeigt und die funktion WURMRE oder WURMLI aufgerufen.
EXEC beispiel8b ausführen